import React, { useState, useEffect, useMemo } from "react";
import { Form, Input, Button, Select, DatePicker, Tooltip, Dropdown, Menu } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import AntdWrapper from "@/components/AntdWrapper";
import { customTrimFunc } from "@/utils/utils.jsx";
import IconFont from "@/components/IconFont";
import styles from "./index.module.less";
import { DownOutlined } from "@ant-design/icons";
import FormRender from '@/components/FormRender';
import { getFormItem } from '../config.js';

const { Option } = Select;
const { RangePicker } = DatePicker;

const SearchContent = ({ query, platformList, handleCreateGroup, handleSearch }) => {

	const typeOptions = platformList.map(d => (
		<Option value={d.type} key={d.type} label={d.typeName}>
			<Tooltip title={d.typeName}>{d.typeName}</Tooltip>
		</Option>
	));

  //表单数据
  const formArr = useMemo(() => {
    return getFormItem({
      type: platformList
    });
  }, [platformList])

	const customSearchBtn = (
		<Dropdown.Button
			htmlType="submit"
			type="primary"
			size="middle"
			icon={<DownOutlined />}
			overlay={
				<Menu>
					<Menu.Item
						key="create"
						onClick={() => {
							handleCreateGroup();
						}}
					>
						<div className={styles.createStore}>
							<IconFont style={{ fontSize: "18px" }} type="iconmaijiadianpu" />
							<div>创建店铺分组</div>
						</div>
					</Menu.Item>
				</Menu>
			}
		>
			搜索
		</Dropdown.Button>
	)

	//表单渲染组件
	const FormRenderProps = {
		query,
		formArr,
		formConfig: {
			name: 'store-manage-form',
			style: { marginBottom: '16px' },
			customSearchBtn
		},
		clickSearch(val) {
			handleSearch(val);
		},
		clickReset() {
			handleSearch();
		},
	}

	return (
		<FormRender {...FormRenderProps} />
	)
};

export default SearchContent;
